<template>
    <el-popover
        placement="right"
        width="200"
        trigger="hover">
        <label-card :label="label" :link="link" @changeLabelAttention="changeLabelAttention"></label-card>
        <el-tag slot="reference" class="label-button no-select" :type="type" :closable="closable">{{label.name}}
        </el-tag>
    </el-popover>
</template>

<script>
    import LabelCard from '@/components/label/LabelCard'
    import { labelType } from '@/constant'

    export default {
        name: 'labelTag',
        components: {
            LabelCard
        },
        props: {
            label: {
                type: Object,
                required: true
            },
            closable: {
                type: Boolean,
                required: false,
                default: false
            },
            link: {
                type: Boolean,
                required: false,
                default: false
            }
        },
        data () {
            return {
                type: null
            }
        },
        mounted () {
            this.type = labelType[Math.floor(Math.random() * labelType.length)]
        },
        methods: {
            changeLabelAttention (data) {
                if (this.link) {
                    this.$emit('changeLabelAttention', data)
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
    .label-button {
        margin: 5px;
    }
</style>
